import type { FillStyle, LineStyle, SymbolStyle } from '../layer'

export const highlightColor = {
  primary: '#ffff00',
  secondary: '#99cc00',
  tertiary: '#003300'
}

export const primaryHighLightSymbolStyle: SymbolStyle = {
  // icon: 'highlight-dot-11',
  icon: 'dot-17-ff0',
  color: highlightColor.primary,
  textOpacity: 1.0,
  fontScale: 1.0,
  textOffset: [0.4, 0.4]
}

export const secondaryHighLightSymbolStyle: SymbolStyle = {
  icon: 'dot-11',
  color: highlightColor.secondary,
  textOpacity: 1.0,
  fontScale: 1.0,
  textOffset: [0.4, 0.4]
}

export const tertiaryHighLightSymbolStyle: SymbolStyle = {
  icon: 'dot-11',
  color: highlightColor.tertiary,
  textOpacity: 1.0,
  fontScale: 1.0,
  textOffset: [0.4, 0.4]
}

export const primaryHighLightLineStyle: LineStyle = {
  lineColor: highlightColor.primary,
  lineWidth: 2,
  lineOpacity: 1.0
}

export const secondaryHighLightLineStyle: LineStyle = {
  lineColor: highlightColor.secondary,
  lineWidth: 2,
  lineOpacity: 1.0
}

export const tertiaryHighLightLineStyle: LineStyle = {
  lineColor: highlightColor.tertiary,
  lineWidth: 2,
  lineOpacity: 1.0
}

export const primaryHighLightFillStyle: FillStyle = {
  fillColor: highlightColor.primary,
  fillOpacity: 0.4,
  fillOutlineColor: highlightColor.primary
}

export const secondaryHighLightFillStyle: FillStyle = {
  fillColor: highlightColor.secondary,
  fillOpacity: 0.4,
  fillOutlineColor: highlightColor.secondary
}

export const tertiaryHighLightFillStyle: FillStyle = {
  fillColor: highlightColor.tertiary,
  fillOpacity: 0.4,
  fillOutlineColor: highlightColor.tertiary
}

export const highlightStyle = {
  symbol: {
    primary: primaryHighLightSymbolStyle,
    secondary: secondaryHighLightSymbolStyle,
    tertiary: tertiaryHighLightSymbolStyle
  },
  line: {
    primary: primaryHighLightLineStyle,
    secondary: secondaryHighLightLineStyle,
    tertiary: tertiaryHighLightLineStyle
  },
  fill: {
    primary: primaryHighLightFillStyle,
    secondary: secondaryHighLightFillStyle,
    tertiary: tertiaryHighLightFillStyle
  },
  primary: {
    symbol: primaryHighLightSymbolStyle,
    line: primaryHighLightLineStyle,
    fill: primaryHighLightFillStyle
  },
  secondary: {
    symbol: secondaryHighLightSymbolStyle,
    line: secondaryHighLightLineStyle,
    fill: secondaryHighLightFillStyle
  },
  tertiary: {
    symbol: tertiaryHighLightSymbolStyle,
    line: tertiaryHighLightLineStyle,
    fill: tertiaryHighLightFillStyle
  }
}
